<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {$LOAD_STYLE.top|raw}
    <style>
        .pear-container{background-color:white;}
        body{margin: 10px;}
    </style>
</head>
<script src="__JS__/clipboard.min.js"></script>
<style>
tr td{
	text-align: center;
}
</style>
<body>
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
    <div class="layui-card">
          <div class="layui-upload">
			<div class="layui-form-item">
				<label class="layui-form-label">图片网址</label>
				<div class="layui-input-block">
				  <textarea name="url" placeholder="请粘贴要抓取的图片网址，多个图片请换行，一个网址一行" class="layui-textarea"></textarea>
				</div>
			</div>
            <div class="layui-upload-list">
              <table class="layui-table">
                <thead>
                  <tr><th>文件名</th>
                  <th>大小</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr></thead>
                <tbody id="demoList">
					
				</tbody>
              </table>
            </div>
            <button type="button" class="pear-btn pear-btn-primary" id="testListAction">开始上传</button>
          </div> 
        </div>      
    </div>
</div>
<script>
    layui.use(['upload', 'element', 'layer','mycomm'], function(){
  var $ = layui.jquery
  ,upload = layui.upload
  ,element = layui.element
  ,mycomm = layui.mycomm
  ,layer = layui.layer;
  
	$("#testListAction").click(function(){
		var val=$('[name="url"]').val();
		if(val==""){
			Alert('请输入图片网址','info',3);
			return false;
		}
		var p_url="{$Request.root}/index/webPhoto";
		load_show('抓取中...');
		$.post(p_url,{path:'{$name}',url:val},function(res){
			load_hide();
			var item=res.data;
			for(var i=0;i<item.length;i++){
				var tr = $(['<tr>'
				  ,'<td><img src="'+ item[i].url +'"/></td>'
				  ,'<td>'+ item[i].size +' KB</td>'
				  ,'<td>' + item[i].msg + '</td>'
				  ,'<td>'
				    ,'<button class="tag-item layui-btn layui-btn-primary layui-btn-xs demo-reload" copy="' + item[i].url + '">复制远程网址</button>'
				  ,'</td>'
				,'</tr>'].join(''));
				
				$('#demoList').append(tr);
			}
			$('[name="url"]').val('');
		});
	});
});
</script>
{$LOAD_STYLE.bottom|raw}
</body>
</html>